<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 上面这个是引入最新版本的 -->
    <!--<script src="https://unpkg.com/vue@next"></script>-->
    <!-- 相当于引入指定版本 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>


<div id="app">
    <h3>VUE是js写的 所以可以直接在HTML中引入使用</h3>
    <h3>VUE的内容必须放到一个DIV中 并且设置一个id</h3>
    <h3>VUE使用数据</h3>
    <h3>1、直接通过花括号{}使用</h3>
    <h3>2、类似于thymeleaf放到标签中</h3>
    {{ message }}<br/>
    <span v-html="userName"></span>
    <span v-text="password"></span>
</div>

</body>


<script>
    const { createApp } = Vue

    createApp({
        data() { //data 数据
            return { //需要将数据放到return中 JSON格式
                message: 'Hello Vue!',
                userName:'张三',
                password:'123456'
            }
        }
    }).mount('#app') //挂载到id是app上面
</script>

</html>